<template>
	<div class="page-container">
		<el-row>
			<el-col :push="8" :sm="8" class="logo-container">
				<el-image alt="logo" :src="logo"></el-image>
			</el-col>
		</el-row>
		<el-row>
			<el-col :push="8" :sm="8" class="login-container">
				<keep-alive>
					<router-view v-if="this.$route.meta.isKeepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!this.$route.meta.isKeepAlive"></router-view>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: "login-page",
	data() {
		return {
			logo: require("@/assets/images/logo.png")
		};
	}
};
</script>
<style scoped>
.page-container {
	width: 100%;
	height: 100%;
	background-image: url("../../assets/images/login-bg.jpg");
	background-size: cover;
	background-position: center;
}

.logo-container >>> .el-image__inner {
	width: 300px;
	height: 278px;
}

.login-container {
	display: grid;
	align-items: start;
	justify-content: center;
}

.login-container >>> .el-card {
	width: 500px;
}

.login-container >>> .el-card__header {
	background-color: #E8F0FE;
	height: 70px;
}

.login-container >>> .el-form-item {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}

.login-container >>> .el-input {
	width: 300px;
}
</style>
